<template>
  <div class="contentCate">
    <el-card class="box-card" v-if="status === 'index'">
      <div slot="header">
        <span>运单编号列表</span>
      </div>
      <el-row>
        <el-input v-model="searchParams.express_no" placeholder="请输入快递单号" clearable style="width:200px" size="medium"></el-input>
        <el-select v-model="searchParams.express_title" placeholder="请选择快递名称"  :style="{width:'200px'}" clearable>
           <el-option v-for="item in expressArr" :key="item.id" :value="item.title" :label="item.title"></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" size="medium" @click="getData" v-if="has('expressInfo/index')">搜索</el-button>
        <el-button type="info" icon="el-icon-refresh" size="medium" @click="reset" v-if="has('expressInfo/index')">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" size="medium" @click="add" v-if="has('expressInfo/store')">添加</el-button>
        <el-upload :action="uploadUrl"  :show-file-list="false" size="medium" :on-success='uploadSuccess' style="display:inline-block">
            <el-button size="medium" type="primary" icon="el-icon-upload">导入</el-button>
        </el-upload>
      </el-row>
      <el-table :data="data.data" v-loading='table_loading' row-key="id" style="width: 100%;margin:10px auto"  :header-cell-style="{background:'#eee'}">
        <el-table-column fixed prop="id" label="ID" width="200" align="center" sortable></el-table-column>
        <el-table-column prop="express_title" label="快递名称" width="200" align="center"></el-table-column>
        <el-table-column prop="express_no" label="运单编号" width="200" align="center"></el-table-column>
        <el-table-column prop="created_at"  label="创建时间" align="center" sortable></el-table-column>
        <el-table-column fixed="right" label="操作"  align="center" width="200">
          <template slot-scope="scope" align="center">
            <el-button type="primary" size="small" icon="el-icon-edit" @click="edit(scope.row.id)" v-if="has('expressInfo/show')"></el-button>
            <el-button type="danger" size="small" icon="el-icon-delete" @click="del(scope.row.id,scope.$index)" v-if="has('expressInfo/del')"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background style="text-align:center;margin:20px 0;" :current-page="searchParams.page" :page-sizes="pageSizes" layout="total,prev, pager, next,sizes" :total="data.total" @size-change="changeSize" @current-change="changePage"></el-pagination>
    </el-card>

    <el-dialog title="添加运单编号" :visible.sync="addStatus" @close="init">
        <el-form :model="editParams" :rules="rules" ref="form" label-width="120px">
            <el-form-item label="快递名称" prop="express_title">
                <el-input v-model="editParams.express_title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="运单编号" prop="express_no">
                <el-input v-model="editParams.express_no" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="init">取 消</el-button>
            <el-button type="primary" @click="submit('form',1)" v-if="has('expressInfo/store')">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="编辑运单编号" :visible.sync="editStatus" @close="init">
        <el-form :model="editParams" :rules="rules" ref="form" label-width="120px">
             <el-form-item label="快递名称" prop="express_title">
                <el-input v-model="editParams.express_title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="运单编号" prop="express_no">
                <el-input v-model="editParams.express_no" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="init">取 消</el-button>
            <el-button type="primary" @click="submit('form',2)" v-if="has('expressInfo/edit')">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import api from '../../api/api.js';
export default {
  name: 'contentCate',
  data () {
    return {
      status:'index',         // 页面控制
      data: [],               // 表格诗句
      table_loading:true,     // 表格加载中
      loading:false,          //全局加载中
      uploadUrl:'admin/expressInfo/import', // 上传地址,
      addStatus:false,
      editStatus:false,
      pageSizes:[10,20,50,100,200,500,800,1000,2000], // 每页条数默认10
      searchParams:{                   // 搜索参数
        page:1,
        limit:10,
        express_no:'',
        express_title:''
      },
      editParams:{                     // 添加/编辑参数
        express_no:'',
        express_title:'',
      },
      rules: {                        // 验证规则
        express_title:[
          {required:true,message:'请输入快递名称',trigger:'blur'}
        ],
        express_no:[
          {required:true,message:'请输入运单编号',trigger:'blur'}
        ],
      },
       expressArr:[
          {id:1,title:"韵达快递",value:'yunda'},
          {id:2,title:"中通快递",value:'zhongtong'},
          {id:3,title:"圆通快递",value:'yuantong'},
          {id:4,title:"申通快递",value:'shentong'},
          {id:5,title:"百世快递",value:'huitongkuaidi'},
        ],
    }
  },
  created(){
    this.getData();
  },

  methods:{
      // 加载中
      load(){
        this.loading  = this.$loading({
            lock: true,
            text: '数据加载中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
      },
      // 取消加载
      unload(){
        this.loading.close();
      },
      // 获取所有数据
      getData(){
        this.table_loading = true;
        api.expressInfo.index({params:this.searchParams}).then((res) =>{
            if (res.data.code == 200) {
              this.table_loading = false;
              this.data = res.data.data;
            }
        }).catch((error) => {
          console.log(error);
        });
      },
      // 重置搜索参数重新搜索
      reset(){
        this.init();
        this.getData();
      },
      // 初始化
      init(){
        this.searchParams.express_title = '';
        this.searchParams.express_no = '';
        this.editParams = {
            express_title:'',
            express_no:''
        };
        this.addStatus = false;
        this.editStatus = false;
      },
      // 改变每页条数时
      changeSize(limit){
        this.searchParams.limit = limit;
        this.getData();
      },
      // 改变当前页码时
      changePage(page){
        this.searchParams.page = page;
        this.getData();
      },
      // 添加页面
      add(){
        this.addStatus = true;
      },
      // 编辑页面
      edit(id){
        this.load();
        api.expressInfo.show(id).then((res) =>{
          this.unload();
          if (res.data.code == 200) {
            this.editStatus = true;
            this.editParams = res.data.data;
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      // 保存添加或编辑
      submit(formName,type){
        this.$refs[formName].validate((valid,error) => {
          if (valid) {
            this.load();
            // 添加
            if (type === 1) {
                api.expressInfo.store(this.editParams).then((res) =>{
                  this.unload();
                  if (res.data.code == 200) {
                    this.reset();
                  }
                }).catch((error) => {
                  console.log(error);
                });
            } else if (type == 2) {
              // 编辑
              api.expressInfo.edit(this.editParams.id,this.editParams).then((res) =>{
                 this.unload();
                  if (res.data.code == 200) {
                    this.reset();
                  }
                }).catch((error) => {
                  console.log(error);
                });
            }
          } else {
            this.$message.error(Object.values(error)[0][0].message);
            return false;
          }
        });
      },
      uploadSuccess(res){
        this.$message.success(res.msg)
        this.init();
        this.getData();
      },
      // 删除
      del(id,index){
        this.$confirm('此操作将删除该运单编号及其下的所有内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal:false,
          type: 'warning'
        }).then(() => {
          api.expressInfo.del(id).then((res) =>{
              if (res.data.code == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.data.data.splice(index,1);
                this.data.total--;
              }
          }).catch((error) => {
            console.log(error);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
  }
}
</script>

<style scoped lang="less">
    .contentCate {
      margin: 0 auto;
      .search {
        margin:  0 auto 10px auto;
      }
    }

</style>
